<template>
  <div class="page">
  <div class="header">
    <img src="@/assets/expert/you.png" class="you"/>
    <div class="searchbox">
      <img src="@/assets/expert/search.png" />
    </div>

    <label @click="authenticationexport()">认证专家</label>

  </div>
  <div class="tabswitch">
   <van-tabs  @click="see" f type="line" v-model="active" title-active-color="#ffa300" color="#000" swipe-threshold="5" line-height="5px" class="tabitem" background="#000" title-inactive-color="#fff" :border="false" :ellipsis="false">
      <van-tab v-for="(it,index) in tablist" :title="it.major_name"  :name="it.id" :key="index"  style="font-size: 18px !important">
      </van-tab>
    </van-tabs>

    <div class="more" @click="more()">
      <img src="@/assets/expert/screen.png"/>
      <label>更多</label>
    </div>

  </div>
    <div class="tabswitchcontent">
      <ul class="tabdiv">
        <li :class="{active:type==2?true:false}" @click="switchevent(2)">直播</li>
        <li :class="{active:type==1?true:false}" @click="switchevent(1)">视频</li>
      </ul>
      <template>
        <van-list
                v-model="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="loadMore"
                :offset="10"
        >
        <div class="wrapper" v-for="(item,index) in contentlist" :key="index">
          <div class="wrapper-wen">
            <img src="@/assets/school/zhibodanghang.png" alt />
            <ul>
              <li>{{item.username}}</li>
              <li>{{item.major_name}}</li>
              <li v-if="item.is_free==-1">免费</li>
              <li v-else>￥{{item.ore_money}}</li>
              <template v-if="item.state==1&&type==2">
              <li>正在直播</li>
              </template>
              <template v-else>
                <li></li>
              </template>
              <li> <img src="@/assets/school/zhibodanghang.png" alt /></li>
            </ul>
          </div>
          <p>{{item.video_title}}</p>
          <button>+关注</button>
        </div>
        </van-list>

      </template>

    </div>


  </div>



</template>

<script>
  import { majortab,majorcontent,wetherauth } from "../../request/expert";
  import infiniteScroll  from 'vue-infinite-scroll';
export default {
  name: "",
  data() {
    return {
      active: 0,
      value: "",
      type:2,
      tablist:[],
      contentlist:[],
      loading: false,
      finished: false,
      page: 1,//请求第几页
      pageSize: 10,//每页请求的数量
      total: 0,//总共的数据条数
      userid:"111"
    };
  },
  directives: {
    infiniteScroll
  },
  props: {},
  components: {},
  mounted() {
    if(this.$route.params.active!=undefined&&this.$route.params.active!="undefined")
    {
      this.active=this.$route.params.active;
    }
     this.gettablist();
     this.getcontentlist();
  },
  methods: {
    switchevent:function (type) {
        this.type=type;
        this.contentlist=[];
        this.page=1;
        this.getcontentlist();
    },
    authenticationexport:function () {
      var that=this;
      wetherauth(that.userid).then(res => {
        if(res.data.code==0)
        {
          this.$router.push({path:'/certified',query:{userid:that.userid}});
        }
        else
        {
          this.$router.push({path:'/certification',query:{userid:that.userid}});
        }
      });
    },
    gettablist:function () {
      var that=this;
      majortab().then(res => {
        var tablist=res.data.result.data;
        var objectitem={
          id:0,
          major_name:"全部",
          state:1
        }
        tablist.unshift(objectitem)
        that.tablist=tablist;
      });
    },

    see:function (name,title) {
            this.type=2;
            this.active=name;
            this.page=1;
            this.contentlist=[];
            this.getcontentlist();
    },
    getcontentlist:function () {
      var that=this;
      var data={
        major_id:that.active,
        is_video:that.type,
        page:that.page
      }
      majorcontent(data).then(res => {
        if(res.data.code==0)
        {
          that.loading = false;
          that.total = res.data.result.total_count;
          if (res.data.result.data == null || res.data.result.data.length === 0) {
            // 加载结束
            this.finished = true;
            return;
          }
          that.contentlist=that.contentlist.concat(res.data.result.data);
          if (that.contentlist.length >= that.total) {
            this.finished = true;
          }
        }
        else
        {
          that.loading = false;
        }
      });
    },
    loadMore(){
      console.log(this.contentlist.length);
      console.log(this.total);
      if(this.contentlist.length<this.total)
      {
        this.page++;
        this.getcontentlist();
      }

    },
    more:function () {
      var that=this;
      this.$router.push({name:'menu',params:{majorid:that.active}});
    }
  },
  watch: {},
};
</script>

<style scoped>
  .page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000000;
  }
  html {
    background: #000;
  }
  *
  {
    margin: 0;
    padding: 0;
  }
  .van-tabs__line {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    height: 3px;
    background:none !important;
    border-radius: 3px;
  }

  .header {
    display: flex;
   /* flex-direction: row;*/
    background: #000000;
    width: 100%;
    height: 88px;
    justify-content: space-around;
    align-items: center;
  }

  .you {
    width: 29px;
    height: 29px;
    display: block;
   /* margin-left: 17px;
    margin-top: 30px;*/
  }

  .searchbox {
    width: 500px;
    height:61px;
    background: rgba(35, 35, 35, 1);
  }

  .searchbox img {
    width: 29px;
    height: 29px;
    display: block;
    margin-left: 10px;
    margin-top: 15px;
  }

  .header label {
    height: 40px;
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
  }
  .van-tabs__wrap
  {
    border: none !important;
  }
  /* 直播的内容展示 */
  .wrapper {
    width: 750px;
    height: 520px;
    background: #000;
  }
  .wrapper-wen {
    width: 750px;
    height: 304px;
    background: #000;
    position: relative;
  }
  .wrapper-wen img {
    padding: 20px;
    line-height: 283px;
    width: 710px;
    height: 290px;
  }

  .wrapper-wen ul li:nth-of-type(1) {
    position: absolute;
    left: 115px;
    top: 46px;
    color: #fff;
    font-size: 30px;
  }
  .wrapper-wen ul li:nth-of-type(2) {
    width: 80px;
    height: 43px;
    line-height: 43px;
    text-align: center;
    background: #fea300;
    position: absolute;
    color: #fff;
    font-size: 24px;
    left: 210px;
    top: 46px;
    border-radius: 10px;
  }
  .wrapper-wen ul li:nth-of-type(3) {
    position: absolute;
    right: 50px;
    top: 46px;
    color: red;
    font-weight: 900;
    font-size: 30px;
  }
  .wrapper-wen ul li:nth-of-type(4) {
    position: absolute;
    bottom: 10px;
    left: 35px;
    color: red;
    font-size: 30px;
    font-weight: 900;
  }
  .wrapper-wen ul li:nth-of-type(5) {
    position: absolute;
    top: 12px;
    left: 25px;
    color: red;
    font-size: 30px;
    font-weight: 900;
  }
  .wrapper-wen ul li:nth-of-type(5) img
  {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }
  .wrapper p {
    font-size: 33px;
    color: #fff;
    width: 684px;
    height: 85px;
    margin: 26px 0 0 28px;
  }
  .wrapper button {
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #fd0000;
    color: #fff;
    font-size: 28px;
    border: none;
    float: right;
    margin: 20px 20px 0 0;
    border-radius: 10px;
  }
  .tabswitch
  {
    height: 88px;
    padding-left: 20px;
    font-size: 36px !important;
  }
  .tabdiv
  {
    width: 100%;
    height: 88px;
    background: #303030;
    display: flex;
    flex-direction: row;
  }
  .tabdiv li
  {
    width: 50%;

    text-align: center;
    line-height: 88px;
    font-size:34px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    opacity:1;
  }
  .active
  {
    background:rgba(254,163,0,1);
  }
  .more
  {
    position: absolute;
    right: 50px;
    top: 0;
    background: #000000;
    color: #ffffff;
    height: 88px;
    line-height: 88px;
    display: flex;
    flex-direction: row;
  }
  .more img,.more label
  {
    display: block;
  }
  .more img
  {
    width: 29px;
    height: 29px;
    margin-top: 30px;
    margin-right: 10px;
  }
  .more label
  {
    font-size:32px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:88px;
    color:rgba(255,255,255,1);
    opacity:1;
  }
  .tabswitch
  {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    line-height: 88px;
  }
  /deep/.van-tabs
  {
    width: 80%;
    font-size: 28px !important;
    line-height: 88px !important;
  }
  /deep/.van-tab
  {
    height: 1.17333rem;;
    font-size: 0.42667rem;
    line-height: 1.17333rem;;
  }
  /deep/.van-tabs--line .van-tabs__wrap
  {
    height: 1.17333rem;
  }
</style>